<template>

    <!--this is hello-->
    <!--<h1>{{ msg }}</h1>-->
    <!--<h2>Essential Links</h2>-->
    <!--<div @click="onClick()">点我获取数据</div>-->
    <!--<div>从后端获取的数据：</div>-->
    <!--<div>{{result}}</div>-->
    <!--<el-button>hello</el-button>-->
    <!--<el-checkbox>check box</el-checkbox>-->
    <!--<button class="btn btn-primary">bootstrap</button>-->
    <!--<select>-->
      <!--<option>1</option>-->
      <!--<option>2</option>-->
      <!--<option>3</option>-->
      <!--<option>4</option>-->
      <!--<option>5</option>-->
    <!--</select>-->
    <!--<ul class="dropdown-menu">-->
      <!--<li>aaa</li>-->
      <!--<li>bbb</li>-->
      <!--<li>ccc</li>-->
    <!--</ul>-->
  <div class="hello">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
import ElCheckbox from "../../node_modules/element-ui/packages/checkbox/src/checkbox.vue";

export default {
  components: {
    ElCheckbox,
    ElButton},
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      result: ''
    }
  },
//  created () {
//    window.alert('created called')
//    console.log('created called')
//  },
//  mounted () {
//    setInterval(() => {
//      axios.get('http://192.168.0.120:9090/greeting')
//        .then((response) => {
//          console.log(response);
//          this.result = response.data;
//          if (response.data === true) {
//            console.log('get true')
//          } else {
//            console.log('get false')
//          }
//        })
//        .catch((error) => {
//          console.log(error);
//        });
//    }, 3000)
//  },
//  destroyed () {
//    window.alert('destroyed called')
//    console.log('destroyed called')
//  },
  methods: {
    onClick() {
      console.log('clicked');
//      axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//      axios.post('http://localhost:8081/user/token', qs.stringify({
//        token: '0f216591-6b42-4b53-8f17-569ce10cd3bd'
//      }))
      setInterval(() => {
        axios.get('http://192.168.0.120:9090/greeting')
          .then((response) => {
            console.log(response);
            this.result = response.data;
          })
          .catch((error) => {
            console.log(error);
          });
      }, 3000)

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
